<template>
	<view class="" style="height: 100vh">
		<!-- 视频模块 -->
		<view id="livePlayer" style="height: 430rpx"></view>
		<!-- tabbar -->
		<view class="sone">
			<view class="tab-wrap" v-for="bar in tabbarList" :key="bar.value">
				<view class="soneitem" :class="currentTab===bar.value ? 'sactive' : ''" @click="onChangeTabBar(bar.value)">
					<text class="ziname">{{bar.label}}</text>
					<text class="xian"></text>
				</view>
				<view class="shu"></view>
			</view>
		</view>
		<!-- 聊天列表 -->
		<view class="chat-list-wrapper" v-if="currentTab===1">
			<scroll-view scroll-y>
				<view class="msg-item" v-for="(item,index) in chatMsgList" :key="index">
					<view class="mame-wrap">
						<text>{{item.username}}：</text>
						<text>{{item.time}}</text>
					</view>
					<view class="msg-content">
						{{item.msg}}
					</view>
				</view>
			</scroll-view>

		</view>
		<!-- 聊天输入框 -->
		<view class="botgou" v-if="currentTab===1">
			<view class="input-wrap">
				<u-input v-model="chatMsg" type="textarea" height="70rpx" style="margin-right: 20rpx;" placeholder="快来发言吧~"
					:clearable="false"></u-input>
				<view class="question-btn" @click="sendMsg"
					:style="{background:!chatMsg?'#D9D1C3':'linear-gradient(-90deg, #FA4E4E, #FD894F)'}">
					发送</view>
			</view>
		</view>
		<view class="intro" v-if="currentTab===3">
			直播简介
		</view>
		<!-- 文档模块 -->
		<view id="drawPanel" v-show="currentTab===2"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomid: "C907590113F5A48D9C33DC5901307461", //直播间房间id
				userid: "677D7D6D589120DA",
				tabbarList: [{
					label: '聊天',
					value: 1
				}, {
					label: '文档',
					value: 2
				}, {
					label: '简介',
					value: 3
				}],
				currentTab: 1,
				chatMsg: '',
				chatMsgList: []
			};
		},
		onLoad({
			id
		}) {
			// if (id) {
			// 	this.getLiveDetail(id);
			// }
			this.h5Live();
		},
		methods: {
			onChangeTabBar(e) {
				this.currentTab = e
			},
			// 获取直播详情
			async getLiveDetail(id) {
				const res = await this.$u.api.getZhiboDetail({
					id,
				});
				this.h5Live();
			},

			// h5直播
			h5Live() {
				DWLive.init({
					userid: this.userid, //必须参数
					roomid: this.roomid, //必须参数
					// groupid: "groupid", //可选
					// viewername: 'name',//可选
					// viewertoken: 'password',//如果直播间设置为密码验证，必选
					// viewercustomua: 'android',//可选
					// language: 'en',//可选
					pcH5Live: true, //可选
					// viewercustominfo: '{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}',//可选
					fastMode: true, //可选参数，默认为true
					// isShowFullScreen:true,//可选参数，默认为true
				});
				DWLive.onPublicChatMessage = (data) => {
					console.log('聊天消息', JSON.parse(data))
					this.chatMsgList.push(JSON.parse(data))
				}
			},
			sendMsg() {
				if (!this.chatMsg) return
				DWLive.sendPublicChatMsg(this.chatMsg)
				this.chatMsg = ''
			}
		},
	};
</script>

<style lang="scss" scoped>
	.sone {
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 4rpx solid #eeeeee;

		.tab-wrap {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
		}

		.soneitem {
			// width: 50%;
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			position: relative;
			justify-content: center;

			.ziname {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}

			.xian {
				position: absolute;
				width: 40%;
				left: 30%;
				bottom: 0;
				height: 4rpx;
				background: linear-gradient(-90deg, #fa4e4e, #fd894f);
				border-radius: 2rpx;
				display: none;
			}
		}

		.sactive {
			.xian {
				display: inline-block;
			}

			.ziname {
				color: rgba(241, 123, 19, 1);
			}
		}

		.shu {
			width: 1rpx;
			height: 38rpx;
			background-color: #cccccc;
			opacity: 0.7;
		}
	}

	.chat-list-wrapper {
		padding: 20rpx;

		.msg-item {
			margin-bottom: 36rpx;

			.mame-wrap {
				font-weight: bold;
				font-size: 22rpx;
				color: #F17B13;
				line-height: 28rpx;
				margin-bottom: 20rpx;

				>text {
					&:last-child {
						font-weight: 500;
						font-size: 14rpx;
						color: #999999;
					}
				}
			}

			.msg-content {
				padding: 20rpx;
				border-radius: 8rpx;
				background: rgba(240, 97, 3, 0.05);
				font-weight: 500;
				font-size: 22rpx;
				color: #333;
				line-height: 28rpx;
			}
		}

	}

	.botgou {
		position: fixed;
		width: 100%;
		min-height: 120rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		box-shadow: 0rpx 3rpx 18rpx 0rpx #f0f0f0;
		padding: 20rpx 30rpx;
		bottom: 0;
		z-index: 100;

		.input-wrap {
			width: 100%;
			min-height: 70rpx;
			background: #FEF7F2;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 30rpx;
			padding-right: 10rpx;

			>.question-btn {
				width: 100rpx;
				height: 50rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 25rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 50rpx;
			}
		}
	}

	.intro {
		padding: 20rpx;
	}
</style>